<template>
  <el-tabs type="border-card">
    <el-tab-pane label="常规">
      <el-form :inline="true" :model="form" label-width="100px">
        <el-form-item label="关联ID">
          <el-input v-model="form.id" disabled />
        </el-form-item>
        <el-form-item label="关联名称">
          <el-input v-model="form.name" :disabled="!isEditModel" @input="nameChange" />
        </el-form-item>
        <el-form-item v-if="conditions.length !== 0" label="条件序号">
          <el-select v-model="form.conditionNum" :disabled="!isEditModel" @change="conditionNumChange">
            <el-option
              v-for="item in conditions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!-- <el-tab-pane label="Tab2">Tab2</el-tab-pane> -->
  </el-tabs>
</template>

<script>
import Constant from '../Constant'
import Utils from '../Utils'

export default {
  name: 'PhuketPanelConnection',
  props: {
    modeler: {
      type: Object,
      required: true
    },
    connection: {
      type: Object,
      required: true
    },
    model: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      form: {
        id: '',
        name: '',
        color: null
      },
      conditions: [] // 条件序号列表
    }
  },
  computed: {
    isEditModel() {
      return Utils.isEditModel(this.model)
    }
  },
  watch: {
    // 监听connection值变化并调用
    connection: function() {
      this.updateFrom()
    }
  },
  mounted: function() {
    this.initConditions()
    this.updateFrom()
  },
  methods: {
    // 更新表单对象
    updateFrom() {
      if (!this.connection) return
      this.form = {
        ...this.connection.businessObject,
        ...this.connection.businessObject.$attrs
      }
      // console.log(this.form);
    },
    // 属性面板名称，更新回Connection
    nameChange(val) {
      this.modeler.get('modeling').updateLabel(this.connection, val)
    },
    // 条件编号，更新回Connection
    conditionNumChange(val) {
      Utils.updateElement(this.modeler, this.connection, { conditionNum: val })
    },
    // 初始化条件参数列表
    initConditions() {
      const sourceShape = this.connection.source
      if (sourceShape) {
        const attrs = sourceShape.businessObject.$attrs
        const type = attrs.type
        if (type === Constant.TYPE_SOURCE || type === Constant.TYPE_PROCESSOR) {
          // 获取条件信息
          let conditions = []
          for (const key in attrs) {
            if (key === Constant.NAME_CONDITIONS) {
              const value = attrs[key]
              if (value && value !== '') {
                conditions = JSON.parse(value)
              }
            }
          }
          if (conditions && conditions.length > 0) {
            for (let i = 1; i <= conditions.length; i++) {
              this.conditions.push({ value: i, label: i })
            }
          }
        }
      }
    }
  }
}
</script>
